import {ref, reactive} from 'vue';
import store from '@/store';
import {defineStore} from 'pinia';
import {userStoreOutside} from './user.ts';

export const getUserId = (): string => {
  const userStore = userStoreOutside();
  return userStore.getUserId();
};

export const useThemeStore: any = defineStore(
  'theme',
  () => {
    const defaultTheme = {
      layout: 'side',
      toggleAnimation: 'slide-left',
      tagsView: true,
      tagsViewCache: true,
    };
    const collapse = ref(false);
    const themeConfig = reactive(defaultTheme);
    const setCollapse = (_collapse) => {
      collapse.value = _collapse;
    };
    const updateStyle = (style) => {
    };
    const updateLayout = (layout) => {
      themeConfig.layout = layout;
    };
    const refresh = () => {
    };
    return {
      collapse: collapse,
      themeConfig: themeConfig,
      refresh: refresh,
      updateStyle: updateStyle,
      updateLayout: updateLayout,
      setCollapse: setCollapse
    };
  },
  {
    persist: {
      // 持久化的key名称
      key: (storeId) => `${storeId}:${getUserId()}`,
      // 存储在sessionStorage，默认是存在localStorage中
      storage: window.localStorage,
      serializer: {
        deserialize: JSON.parse,
        serialize: JSON.stringify
      },
      // 要持久化的属性
      paths: ['themeConfig', 'collapse']
    }
  }
);

// 在组件setup函数外使用
export function themeStoreOutside() {
  return useThemeStore(store);
}
